/**
 * 账号设置
 * */
import React, { useState } from 'react';
import { Modal, Form, message } from 'antd';
import { useRequest } from '@/hooks';
import MultipleInput from '../MultipleInput';
import { updateExternalChannel } from '../../service';

const formItemLayout = {
    labelCol: {
        sm: { span: 7 }
    },
    wrapperCol: {
        sm: { span: 14 }
    }
};

const ExternalAccountModal = ({ form, children, onSuccess, data }) => {
    const { validateFields } = form;
    const [visible, setVisible] = useState(false);
    const [readyFlag, setReadyFlag] = React.useState(false);

    // 编辑渠道账号保存
    const { loading: editModelLoading, run: handleOnEditSave } = useRequest(
        value => updateExternalChannel({ ...value, channelId: data?.id }),
        {
            manual: true,
            onSuccess: result => {
                const { code, msg } = result;
                if (code === 10000) {
                    if (onSuccess) {
                        onSuccess();
                    }
                    setVisible(false);
                } else {
                    message.error(msg);
                }
            }
        }
    );

    // 确定
    const handleOk = () => {
        validateFields((err, values) => {
            if (!err) {
                const { tempKeys = [], tempEmails = [] } = values;
                const channelEmails = tempKeys.map(k => tempEmails?.[k]);
                handleOnEditSave({ channelEmails });
            }
        });
    };

    // 取消
    const handleCancel = () => {
        setVisible(false);
    };

    // 显示modal
    const handleModal = () => {
        setVisible(true);
    };

    const handleAfterClose = () => {
        form.resetFields();
    };

    React.useEffect(() => {
        if (!data || !visible) {
            return;
        }
        const { channelEmails = [] } = data;
        const finalFieldsValue = {
            tempEmails: channelEmails
        };
        if (!readyFlag) {
            setReadyFlag(true);
        } else {
            form.setFieldsValue(finalFieldsValue);
        }
    }, [data, visible, readyFlag]);

    return (
        <>
            <div onClick={handleModal}>{children}</div>
            <Modal
                title="编辑渠道"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                width={640}
                confirmLoading={editModelLoading}
                afterClose={handleAfterClose}
            >
                <Form {...formItemLayout} labelAlign="right" style={{ paddingTop: '30px' }}>
                    <Form.Item label="发送简历邮箱" required>
                        <MultipleInput
                            prefix="temp"
                            form={form}
                            placeholder="请输入发送简历邮箱"
                            initialValue={data?.channelEmails?.map((_, index) => index) || undefined}
                        />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    );
};
export default Form.create()(ExternalAccountModal);
